<template>
  <div>
    <!-- 卡片视图 -->
    <el-card>
    <el-row :gutter="20">
      <el-col :span="20">
        <el-button type="primary" icon="el-icon-plus" v-permission="permission.add" @click="addshowDilog(ToprightProp)">添加权限</el-button>
        <el-button icon="el-icon-edit" type="success" v-permission="permission.edit" @click="settingRule(handleCheckboxRows[0].id)" :disabled="handleCheckboxRows.length !== 1">修改</el-button>
        <el-button icon="el-icon-delete" type="danger" v-permission="permission.del" @click="deleteRules" :disabled="handleCheckboxRows.length < 1">删除</el-button>
      </el-col>
      <el-col :span="4" style="text-align: right;float: right;">
        <table-tools
          :drawerSearch="drawerVisible"
          @searchchange="searchChange"
          @refreshclick="refreshClick">
        </table-tools>
      </el-col>
    </el-row>
    <el-table
      highlight-current-row
      @current-change="handleCurrentChange"
      @selection-change="handleSelectionChange"
      v-loading="loading"
      ref="table"
      :data="rightlist"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column type="index" label="序号" width="120"></el-table-column>
      <el-table-column
        prop="auth_name"
        label="权限名称"
        sortable
        width="240">
      </el-table-column>
      <el-table-column
        prop="path"
        label="组件路径"
        sortable
        width="150">
      </el-table-column>
      <el-table-column
        prop="path_url"
        label="权限标识"
        sortable
        width="240">
      </el-table-column>
      <el-table-column
        prop="level"
        label="权限等级">
        <template v-slot="scope">
          <el-tag type="success" v-show="scope.row.level==0">一级权限</el-tag>
          <el-tag type="error" v-show="scope.row.level==1" style="margin-left: 15px;">二级权限</el-tag>
          <el-tag type="info"  v-show="scope.row.level==2" style="margin-left: 30px;">三级权限</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        width="320"
        label="操作">
        <template v-slot="scope">
          <el-button plain v-permission="permission.add" v-show="scope.row.level==0 || scope.row.level==1" type="primary" icon="el-icon-plus" @click="addshowDilog(scope.row)">增加</el-button>
          <el-button plain icon="el-icon-edit" v-permission="permission.edit" @click="settingRule(scope.row.id)">编辑</el-button>
          <el-button plain type="danger" v-permission="permission.del" icon="el-icon-delete" @click="deleteRule(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    </el-card>

    <!-- 编辑权限信息对话框 -->
    <el-dialog
      title="编辑权限信息"
      :visible.sync="editdialogVisible"
      width="580px"
      @close="editdialogClose"
      :close-on-click-modal="false">
      <el-form ref="editFormRef" :rules="editFormRules" :model="editForm" label-width="80px">
        <el-form-item label="权限名称">
          <el-input v-model="editForm.auth_name"></el-input>
        </el-form-item>
        <el-form-item label="组件路径">
          <el-input v-model="editForm.path"></el-input>
        </el-form-item>
        <el-form-item label="权限标识">
          <el-input v-model="editForm.path_url"></el-input>
        </el-form-item>
        <el-form-item label="权限图标">
          <el-input v-model="editForm.icon"></el-input>
        </el-form-item>
        <el-form-item label="权限等级" prop="email">
          <el-input v-model="editForm.level"></el-input>
        </el-form-item>
        <el-form-item label="菜单显示">
          <el-switch v-model="editForm.menu" :active-value="2" :inactive-value="3"></el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editdialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitRulesInfo">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 新增权限信息对话框 -->
    <el-dialog
      title="新增子权限信息"
      :visible.sync="adddialogVisible"
      width="580px"
      @close="adddialogClose"
      :close-on-click-modal="false">
      <el-form ref="addFormRef" :rules="addFormRules" :model="addForm" label-width="80px">
        <el-form-item label="父级">
          <el-input v-model="parentName" disabled></el-input>
        </el-form-item>
        <el-form-item label="权限名称">
          <el-input placeholder="请输入" v-model="addForm.auth_name"></el-input>
        </el-form-item>
        <el-form-item label="组件路径">
          <el-input placeholder="请输入,例: xxx/xxx" v-model="addForm.path"></el-input>
        </el-form-item>
        <el-form-item label="权限标识">
          <el-input placeholder="例:xxx/xxx" v-model="addForm.path_url"></el-input>
        </el-form-item>
        <el-form-item label="权限等级" prop="email">
          <el-tag type="success" v-show="addForm.level==0">一级权限</el-tag>
          <el-tag type="error" v-show="addForm.level==1">二级权限</el-tag>
          <el-tag type="info" v-show="addForm.level==2">三级权限</el-tag>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="adddialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addRulesInfo">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import tableTools from '@/components/tableToolsComponents' // tabs工具栏组件
export default {
  name: 'rights',
  components: {
    tableTools
  },
  data () {
    return {
      // 指令权限
      permission: {
        add: ['admin', 'power::add'],
        edit: ['admin', 'power::edit'],
        del: ['admin', 'power::delete'],
        setting: ['admin', 'power::setting'], // 分配权限
        tagdel: ['admin', 'power::tagdel']
      },
      handleCheckboxRows: [], // 多选存储rows
      drawerVisible: false, // 搜索栏显示状态
      loading: false, // 表格刷新loading状态
      // 顶级权限属性
      ToprightProp: {
        level: -1,
        id: 0,
        auth_name: '顶级权限'
      },

      // 权限列表
      rightlist: [],

      // 显示权限编辑对话框
      editdialogVisible: false,

      // 编辑对话框表单对象
      editForm: {},

      // 编辑权限表单的验证规则对象
      editFormRules: {
        auth_name: [
          { required: true, message: '请输入权限名称', trigger: 'blur' }
        ]
      },

      // 显示添加权限对话框
      adddialogVisible: false,

      // 显示添加权限表单对象
      addForm: {},

      // 父级权限名称
      parentName: '',

      // 添加权限表单验证规则
      addFormRules: {
        auth_name: [
          { required: true, message: '请输入权限名称', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getRightList()
  },
  methods: {
    async getRightList() {
      this.loading = true
      const { data: res } = await this.$http.get('rules/tree')
      this.loading = false
      if (res.meta.status !== 200) {
        return this.$message.error('获取权限列表失败')
      }
      this.rightlist = res.data
      console.log(this.rightlist)
    },
    // 编辑用户权限信息
    async settingRule(id) {
      const { data: res } = await this.$http.get('rules/' + id)
      if (res.meta.status !== 200) {
        return this.$message.error(res.meta.message)
      }
      this.editForm = res.data
      this.editdialogVisible = true
      console.log(this.editForm)
    },
    // 编辑权限对话框关闭事件
    editdialogClose() {

    },

    // 单选
    handleCurrentChange(val) {
      console.log('单选:', val)
    },

    // checkbox多选回调方法
    handleSelectionChange(val) {
      this.handleCheckboxRows = val
    },

    // 新增权限对话框关闭事件
    adddialogClose() {
      this.addForm = {}
    },
    // 提交保存权限编辑信息
    submitRulesInfo() {
      // 表单验证
      this.$refs.editFormRef.validate(async valid => {
        if (!valid) return
        // 表示通过 可以发起添加用户的网络请求
        const { data: res } = await this.$http.post('rules', this.editForm)
        if (res.meta.status !== 200) {
          return this.$message.error(res.meta.message)
        }
        this.$message.success('修改成功')
        // 隐藏添加用户对话框
        this.editdialogVisible = false
        // 重新获取用户列表数据
        this.getRightList()
      })
    },

    // 显示添加权限对话框事件
    addshowDilog(row) {
      const level = row.level + 1
      this.adddialogVisible = true
      this.parentName = row.auth_name
      this.addForm.pid = row.id
      this.addForm.level = level
      // console.log(id)
    },

    // 添加权限信息提交
    addRulesInfo() {
      // 表单验证
      this.$refs.addFormRef.validate(async valid => {
        if (!valid) return
        // 表示通过 可以发起添加用户的网络请求
        const { data: res } = await this.$http.post('rules', this.addForm)
        if (res.meta.status !== 200) {
          return this.$message.error(res.meta.message)
        }
        this.$message.success('添加成功')
        // 隐藏添加用户对话框
        this.adddialogVisible = false
        // 重新获取用户列表数据
        this.getRightList()
      })
    },

    // 权限删除
    async deleteRule(id) {
      const confirmresult = await this.$confirm('确定删除当前权限以及其下子权限吗? 此操作不可恢复', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      // console.log(confirmresult)
      if (confirmresult !== 'confirm') {
        return this.$message.info('权限取消删除')
      }
      const { data: res } = await this.$http.delete('rules/' + id)
      if (res.meta.status !== 200) {
        return this.$message.error(res.meta.message)
      }
      this.$message.success('权限删除成功')
      // 刷新权限数据列表
      this.getRightList()
    },

    // 批量删除
    async deleteRules() {
      const confirmresult = await this.$confirm('确定删除当前选中的栏目权限吗? 此操作不可恢复', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmresult !== 'confirm') {
        return this.$message.info('权限取消删除')
      }

      const idarr = []
      this.handleCheckboxRows.map(item => {
        idarr.push(item.id)
      })

      const { data: res } = await this.$http.post('deleterules', {
        idstr: idarr.join()
      })
      if (res.meta.status !== 200) {
        return this.$message.error(res.meta.message)
      }
      this.$message.success('权限删除成功')
      // 刷新权限数据列表
      this.getRightList()
    },

    // 工具栏搜索按钮触发回调
    searchChange(val) {
      this.drawerVisible = val
    },
    // 工具栏刷新按钮触发回调
    refreshClick() {
      this.getRightList()
    }
  }
}
</script>

<style lang="less" scoped>

</style>
